<template>
  <div class="zent-loading zent-loading--block zent-loading--has-children" data-zv="9.0.0" style="height: initial;">
    <div class="crm-layout">
      <div class="crm-layout-left">
        <div class="crm-layout-left-title">运营规范</div>

        <el-menu 
        router
        default-active="/operationnorm/docOne" 
        class="el-menu-vertical-demo" 

        @open="handleOpen" 
        @close="handleClose"
          style="border-right:0">
          <el-submenu index="1">
            <template slot="title">
              <span>有赞云平台规范</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/operationnorm/docOne">运营规范</el-menu-item>
                <el-menu-item index="/operationnorm/docTwo">开发规范</el-menu-item>
                <el-menu-item index="/operationnorm/docThree">发布规范</el-menu-item>
                
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="2">
            <template slot="title">

              <span>有赞云平台协议</span>
            </template>
            <el-menu-item-group>
                              <el-menu-item index="/operationnorm/docFour">平台服务协议</el-menu-item>
                <el-menu-item index="/operationnorm/docFive">用户授权服务协议</el-menu-item>

            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="3">
            <template slot="title">

              <span>应用市场平台规范</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">应用上架规范</el-menu-item>
              <el-menu-item index="1-2">违规处罚规范</el-menu-item>
            </el-menu-item-group>

          </el-submenu>
        </el-menu>


      </div>
      <div class="crm-layout-right">
        <div>
          <router-view></router-view>
          
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>
/deep/.el-menu-item:hover {
    color: #409EFF;
}
/deep/ .el-submenu__title {
  text-align: left;
}

/deep/.el-menu-item {
  text-align: left;

}

.zent-loading--block {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  position: relative;

  .crm-layout {
    display: flex;
    width: 1200px;
    margin: auto;

    .zent-menu {
      box-sizing: border-box;
      height: 100%;
      margin-top: 20px;
      color: #333;
      font-size: 14px;
      border: none;
      box-shadow: none;
    }

    .zent-menu__inline {
      width: calc(100% + 24px);
      margin-left: -24px;

      .zent-menu__inline-submenu-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding-left: 24px;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;

        .zent-submenu-title-operate-icon {
          margin-right: 0;
        }
      }
    }

    .crm-layout-left {
      display: flex;
      width: 300px;
      flex-direction: column;
      padding-top: 0;
      padding-right: 22px;

      margin-top: 24px;
      border-right: 1px solid #ebedf0;


      .crm-layout-left-title {
        font-weight: 700;
        font-size: 16px;
        height: 46px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ebedf0;
        margin-bottom: 10px;
      }

    }

    .crm-layout-right {

      display: flex;
      flex: 1;
      min-width: 0;
      line-height: 1.4em;
      padding-top: 24px;
      padding-bottom: 20px;
      padding-left: 40px;

      div {
        width: 100%;
      }

      
    }
  }


}
</style>>
